<template>
  <div class="products">
    <h2>我们的产品</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <img :src="product.image" :alt="product.name">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      products: [
        {
          id: 1,
          name: '产品A',
          image: 'https://cbu01.alicdn.com/img/ibank/O1CN01mrTMJg2MJCnYP42zG_!!3231129806-0-cib.220x220.jpg?_=2020',
          description: '这是一款功能强大的产品A，具有诸多独特的特性，能满足您的各种需求。'
        },
        {
          id: 2,
          name: '产品B',
          image: '@/assets/img_1.png',
          description: '产品B以其高质量和易用性受到广大用户的喜爱。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.products ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.products li {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.products img {
  max-width: 100%;
  height: auto;
}
</style>